<template>
  <div id="echartsMap">
    <table style="height:100%;width:100%;">
      <tr>
      <td id="tdMap" rowspan="2">
           <div id="echartsProvince"></div>
      </td>
      <td>
        <div id="echartsRigthTop"></div>
      </td>
        </tr>
        <tr>
          <td>
            <div id="echartsRigthBottom"></div>
          </td>
          </tr>
    </table>
    <el-dialog id="edialog" title= "工业园列表" :visible.sync = "dialogVisible" width = "30%">
        <table>
        <tr>
          <td style="width:200px;">
            <el-select v-model="valuePark" placeholder="工业园">
              <el-option v-for="item in optionPark" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
           
          </td>
          <td style="width:200px; text-align:center;">
             <el-button size="mini" type="success" @click="viewDetail(scope.row)">进入园区
            </el-button>
          </td>
        </tr>
      </table>
    </el-dialog>
  </div>
</template>

<script>
import optionAnhui from '../../../assets/js/map-option-guangdong.js'
import echartsRigthTopOption from '../../../assets/js/echartsRightTop.js'
import echartsRigthBottomOption from '../../../assets/js/echartsRightBottom.js'
require('echarts/map/js/province/guangdong')

export default {
  name: 'echartsMap',
  data () {
    return {
        optionPark:[
          {value:'1',label:'莆田工业园'},
          {value:'2',label:'珠海工业园'}
          ],
        valuePark    : '',
        msg          : '',
        dialogVisible: false,
        list         : null,
    }
  },
  mounted(){
   let that = this
   this.drawProvinceMap(document.getElementById('routerBase').offsetHeight);
    
  },
  methods: {
          showDialog(){
              this.dialogVisible = true;
          },

          drawTop(){
            let that       = this;
            let myChartTop = that.$echarts.init(document.getElementById('echartsRigthTop'));
             myChartTop.setOption(echartsRigthTopOption);
             setTimeout(() => {
               that.drawBottom();
             }, 100);
          },
          drawBottom(){
            let that       = this;
            let myChartTop = that.$echarts.init(document.getElementById('echartsRigthBottom'));
             myChartTop.setOption(echartsRigthBottomOption);
          },
          drawProvinceMap(height) {
            let                     that                            = this
            document.getElementById('echartsProvince').style.height = height*0.9+'px';
            let                     myChart                         = this.$echarts.init(document.getElementById('echartsProvince'));
            myChart.setOption(optionAnhui);
            that.drawTop();
            window.addEventListener("resize",function(){
                    setTimeout(function () {
                      myChart.resize();
                      },200);
              
            });
            myChart.on('click', function (params) {
              that.showDialog();
            });
          },
        }
        
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 @import '../../../styles/province.scss';
 
 
</style>